<template>
     <div class="menu-img">
        <input type="file" accept="image/*" @change="showImg()" ref="img">
        <div class="img-wrap" v-if="imgUpload.imgShow">
            <img :src="imgUpload.imgSrc" alt="">
            <i class="el-icon-refresh menu-refresh" @click="changeImg()"></i>
        </div>
        <div class="mi-tips">
            点击添加图片
            <p>（建议尺寸1280*1024，支持上传图片格式有jpg、jpeg、png、gif、webp）</p>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      imgUpload: {
        imgShow: false,
        uploading: false,
        imgSrc: null
      }
    }
  },
  methods: {
    showImg () {
      var that = this
      if ((this.$refs.img.files[0].size / 1024 / 1024) > 5) {
        this.$message({
          message: '文件大小不得超过5M,请重新上传',
          type: 'warning'
        })
        this.$refs.img.value = ''
      } else {
        var f = new FileReader()
        f.readAsDataURL(this.$refs.img.files[0])
        f.onload = function () {
          that.imgUpload.imgSrc = f.result
        }
        that.imgUpload.imgShow = true
      }
    }
  }
}
</script>
<style lang="less">
.menu-img{
    position:relative;width:690px;height:390px;
    margin:100px;
    background: #eee url("https://cp1.douguo.com/static/nweb/images/add.png") no-repeat center 140px;
    input{
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    textarea{color: #000;}
    .mi-tips{
        position: absolute;
        top: 225px;
        width: 100%;
        text-align: center;
        text-align: center;color: #999;font-size: 15px;line-height: 20px;
        p{
            font-size: 13px;
        }
    }
    .img-wrap{
        width: 100%;height:100%;
        position: absolute;
        top: 0;left: 0;
        z-index: 4;
        &:hover{
            .menu-refresh{
                display: block;
            }
        }
    }
    img{
        width: 100%;
        height: 100%;
        z-index: 4;
    }
    .menu-refresh{
        position: absolute;top:10px;right:10px;
        font-size: 25px;
        font-weight: bold;
        display: none;
        z-index: 4;
    }
}
</style>
